<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>用户登录_蜗牛嗨购商城</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        .login-form {
            display: none;
        }
        .login-form.active {
            display: block;
        }
        .login-tabs {
            margin-bottom: 20px;
        }
        .login-tabs a {
            margin-right: 20px;
            color: #666;
            text-decoration: none;
        }
        .login-tabs a.active {
            color: #f60;
            font-weight: bold;
        }
    </style>
    <script>
        $(function(){
            // 默认显示用户名密码登录
            $("#password_login").addClass("active");
            $("#password_form").addClass("active");
            
            // 切换登录方式
            $(".login-tabs a").click(function(){
                $(".login-tabs a").removeClass("active");
                $(this).addClass("active");
                
                $(".login-form").removeClass("active");
                var formId = $(this).data("form");
                $("#" + formId).addClass("active");
            });
            
            // 发送验证码
            $("#send_code").click(function(){
                var phone = $("#phone").val();
                if(!phone) {
                    alert("请输入手机号");
                    return;
                }
                $.post("/user/sendCode", {phone: phone}, function(res){
                    if(res === "success") {
                        alert("验证码已发送到手机：" + phone);
                    } else {
                        alert("验证码发送失败，请稍后重试");
                    }
                });
            });
            
            $("#send_email_code").click(function(){
                var email = $("#email").val();
                if(!email) {
                    alert("请输入邮箱");
                    return;
                }

            });

            // 拦截用户名密码登录表单
            $("#password_form").submit(function(e){
                e.preventDefault();
                $.post("/user/ajaxLogin", $(this).serialize(), function(res){
                    if(res.success){
                        window.location.href = "/";
                    }else{
                        alert(res.msg);
                    }
                }, "json");
            });
            // 拦截手机号登录表单
            $("#phone_form").submit(function(e){
                e.preventDefault();
                $.post("/user/ajaxLogin", $(this).serialize(), function(res){
                    if(res.success){
                        window.location.href = "/";
                    }else{
                        alert(res.msg);
                    }
                }, "json");
            });
            // 拦截邮箱登录表单
            $("#email_form").submit(function(e){
                e.preventDefault();
                $.post("/user/ajaxLogin", $(this).serialize(), function(res){
                    if(res.success){
                        window.location.href = "/";
                    }else{
                        alert(res.msg);
                    }
                }, "json");
            });
        });
    </script>
</head>

<body class="second">
<div class="brand_list container_2">
<%--    <jsp:include page="../commons/header.jsp" />--%>
    <%--header--%>
    <div class="header">
        <h1 class="logo">
            <a title="" style="background:url('images/logo.png');" href="/">电子商务平台</a>
        </h1>
        <ul class="shortcut">
            <li class="first"><a href="ucenter">我的账户</a></li>
            <li><a href="ucenter/order">我的订单</a></li>
            <li class='last'><a href="">使用帮助</a></li>
        </ul>
        <p class="loginfo">
            <%--        <c:if test="${not empty sessionScope.user}">--%>
            <%--            ${user.account}您好，欢迎您来到${site}购物！[<a href="/logout" class="reg">安全退出</a>]--%>
            您好，欢迎您来到购物！[<a href="/logout" class="reg">安全退出</a>]
            <%--        </c:if>--%>
            <%--        <c:if test="${empty sessionScope.user}">--%>
            [<a href="/user/login">登录</a>
            <a class="reg" href="/user/register">免费注册</a>]
            <%--        </c:if>--%>
        </p>
    </div>


    <div class="wrapper clearfix">
        <div class="wrap_box">
            <h3 class="notice">已注册用户，请登录</h3>
            <p class="tips">欢迎来到我们的网站，如果您已是本站会员请登录</p>
            <div class="box login_box clearfix">
                ${msg}

                <!-- 登录方式切换标签 -->
                <div class="login-tabs">
                    <a href="javascript:void(0)" data-form="password_form" id="password_login">用户名密码登录</a>
                    <a href="javascript:void(0)" data-form="phone_form" id="phone_login">手机号登录</a>
                    <a href="javascript:void(0)" data-form="email_form" id="email_login">邮箱登录</a>
                </div>

                <!-- 用户名密码登录表单 -->
                <form id="password_form" class="login-form" action='/user/login' method="post">
                    <input type="hidden" name="loginType" value="PASSWORD" />
                    <table width="515" class="form_table f_l">
                        <col width="120px" />
                        <col />
                        <tr>
                            <th>用户名：</th>
                            <td><input class="gray" type="text" name="account" value="laotan"
                                       id="login_info" /><span id="namemsg"></span></td>
                        </tr>
                        <tr>
                            <th>密码：</th>
                            <td><input class="gray" type="password" id="password"
                                       name="password" value="123456" /><span id="pwdmsg"></span></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input class="submit_login" type="submit" value="登录" /></td>
                        </tr>
                    </table>
                </form>

                <!-- 手机号登录表单 -->
                <form id="phone_form" class="login-form" action='/user/login' method="post">
                    <input type="hidden" name="loginType" value="PHONE" />
                    <table width="515" class="form_table f_l">
                        <col width="120px" />
                        <col />
                        <tr>
                            <th>手机号：</th>
                            <td><input class="gray" type="text" name="phone" id="phone" /></td>
                        </tr>
                        <tr>
                            <th>验证码：</th>
                            <td>
                                <input class="gray" type="text" name="code" style="width: 100px;" />
                                <button type="button" id="send_code" style="margin-left: 10px;">获取验证码</button>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input class="submit_login" type="submit" value="登录" /></td>
                        </tr>
                    </table>
                </form>

                <!-- 邮箱登录表单 -->
                <form id="email_form" class="login-form" action='/user/login' method="post">
                    <input type="hidden" name="loginType" value="EMAIL" />
                    <table width="515" class="form_table f_l">
                        <col width="120px" />
                        <col />
                        <tr>
                            <th>邮箱：</th>
                            <td><input class="gray" type="text" name="email" id="email" /></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><input class="submit_login" type="submit" value="登录" /></td>
                        </tr>
                    </table>
                </form>

                <!--正常登录时-->
                <table width="360px" class="form_table prompt_3 f_l">
                    <col width="75px" />
                    <col />
                    <tr>
                        <th></th>
                        <td>
                            <p class="mt_10">
                                <strong class="f14">您还不是<span class="orange">嗨购商城</span>用户
                                </strong>
                            </p>
                            <p>
                                现在免费注册成为嗨购商城用户，便能立即享受便宜又放心的购物乐趣。<a class="blue" href="/">网站首页>></a>
                            </p>
                            <p class="mt_10">
                                <a class="reg_btn" href="/user/register">注册新用户</a>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
<%--    <jsp:include page="../commons/footer.jsp" />--%>
    <%--footer --%>
    <div class="footer">
        <p class="links">
            <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a
                href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
        </p>
        Copyright 蜗牛学苑© 2015-2024 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
    </div>
</div>
</body>
</html>
